<template>
  <a-modal v-model="visible" title="面试评价" @ok="handleOk" okText="评价" @cancel="$emit('update:visible', false)">
    <div class="tit">请根据面试者的表现，给出本轮面试结果及评价</div>
    <div class="tab">
      <div class="tab-item" :class="select ? 'backgrounds' : ''" @click="select = true">
        通过
      </div>
      <div class="tab-item" :class="!select ? 'backgrounds' : ''" @click="select = false">
        未通过
      </div>
    </div>
    <div class="tit">面试评价</div>
    <a-textarea v-model="value" placeholder="请输入" :auto-size="{ minRows: 5, maxRows: 5 }" />
  </a-modal>
</template>

<script>
import { putDeliverRecords } from "../api";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    evaluateId: {
      type: String,
      default: ""
    },
    recruitInfoId: {
      type: String,
      default: ""
    },
    companyUnitsId: {
      type: String,
      default: ""
    }
  },
  watch: {
    visible(v) {
      if (v) this.value = "";
    }
  },
  data() {
    return {
      select: true,
      value: ""
    };
  },
  methods: {
    async handleOk() {
      try {
        await putDeliverRecords({
          id: this.evaluateId,
          companyUnitsId: this.companyUnitsId,
          recruitInfoId: this.recruitInfoId,
          status: this.select ? 3 : 7,
          interviewEvaluation: this.value
        });
        this.$emit("update:visible", false);
        this.$emit("upDate");
      } catch (err) {
        console.log("error log --> ", err);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.tit {
  font-size: 16px;
  font-weight: 500;
  color: #3c3d43;
  margin-bottom: 16px;
}
.tab {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  .tab-item {
    width: 48%;
    height: 160px;
    line-height: 160px;
    text-align: center;
    border: 1px solid rgba(107, 107, 242, 0.6);
    border-radius: 4px;
  }
  .backgrounds {
    background: rgba(107, 107, 242, 0.1);
  }
}
</style>
